<template>
	<view class="meeting-room-list">
		<view class="meeting-room-item" v-for="(item, index) in list" :key="index">
			<image class="room-image" :src="imageBasePath + item.meetingImg" mode="aspectFill"></image>
			<view class="room-info">
				<!-- <view class="room-title">
					<view>{{ item.meetingName }}</view>
					<view class="price" v-if="!item.meetingTopic">需联系物业开门</view>
				</view> -->
				<view class="room-title flex items-center">
				  <view class="mr-2">{{ item.meetingName }}</view>
				  <view class="price text-sm text-gray-500" style="margin-left: 30rpx;"  v-if="!item.meetingTopic">需联系物业开门</view>
				</view>
				<view class="room-ratings">
					<view class="rating-item">
						环境 <span class="rating-value">{{ item.environmentRating || '5.0' }}</span>
					</view>
					<view class="rating-item">
						卫生 <span class="rating-value">{{ item.cleanRating || '5.0' }}</span>
					</view>
				</view>
				<view class="room-address">
					{{ item.meetingAddress }}
					<image class="map-icon" src="/static/images/map-icon.png" @click="openMap(item)"></image>
				</view>

				<view class="room-footer">
					<view class="price" v-if="item.price">{{ item.price || '0' }}元/小时</view>
					<view class="price" v-else>限时免费</view>
					<view class="book-btn" @click="onBook(item)">前往预定</view>
				</view>
				<!-- 时段显示器 -->
				<view class="time-slot-container">
					<!-- <time-slot :disTimeArr="disTimeArr" :currentDay="currentDay"></time-slot>-->
					<!-- <time-slot :disTimeArr="timeSlotsMap[item.id] || []"  :currentDay="currentDay"></time-slot> -->
					<time-slot :minHours="item.minHours" :disTimeArr="item.meetingTimeFrameList || []" :currentDay="currentDay"></time-slot>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getTimeFrameByList,
		getPath
	} from '@/api/main/main';
	import TimeSlot from '@/components/time-slot/time-slot.vue';

	export default {
		components: {
			TimeSlot
		},
		name: 'MeetingCard',
		props: {
			list: {
				type: Array,
				required: true,
				default: () => []
			},
			imageBasePath: {
				type: String,
				default: getPath()
			},
			showBookButton: {
				type: Boolean,
				default: true
			},
			updateKey: {
				type: Number,
				default: 0
			},
			currentDay: {
				type: String,
				default: () => {
					const date = new Date();
					const year = date.getFullYear();
					const month = String(date.getMonth() + 1).padStart(2, '0');
					const day = String(date.getDate()).padStart(2, '0');
					return `${year}-${month}-${day}`; // 格式：yyyy-MM-dd
				}
			}
		},
		computed: {


		},
		// created() {
		// 	this.loadTimeSlots();
		// 	console.log( "created loadTimeSlots" );
		// },
		mounted() {
			// this.loadTimeSlots();
			console.log("mounted loadTimeSlots");
		},
		// onLoad() {
		// 	this.loadTimeSlots();
		// 	console.log( "onLoad loadTimeSlots" );
		// },
		data() {
			return {
				timeSlotsMap: {}
			};
		},
		methods: {
			async loadTimeSlots() {
				for (const item of this.list) {
					this.$set(this.timeSlotsMap, item.id, await this.fetchTimeSlots(item))
				}
				console.log("this.timeSlotsMap", this.timeSlotsMap);
			},
			async fetchTimeSlots(item) {
				try {

					const response = await getTimeFrameByList({
						meetingId: item.id,
						date: this.currentDay
					});
					return response.data?.map(slot => ({
						...slot,
						begin_time: slot.startDate,
						end_time: slot.endDate
					})) || [];
				} catch (error) {
					console.error("获取时段失败:", error);
					return [];
				}
			},
			onBook(item) {
				this.$emit('book', item)
			},
			openMap(item) {
				this.$emit('map-click', item)
			}
		}
	}
</script>

<style scoped>
	.meeting-room-list {
		width: 100%;
		padding: 20rpx 30rpx;
	}

	.meeting-room-item {
		display: flex;
		padding: 30rpx;
		margin-bottom: 30rpx;
		background-color: #fff;
		border-radius: 24rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.06);
		transition: all 0.3s ease;
		flex-direction: column;
	}

	.meeting-room-item:active {
		transform: scale(0.98);
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.room-image {
		width: 100%;
		height: 320rpx;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		object-fit: cover;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.room-info {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.room-title {
		font-size: 34rpx;
		font-weight: 600;
		margin-bottom: 20rpx;
		color: #333;
		line-height: 1.4;
	}

	.room-ratings {
		display: flex;
		margin-bottom: 20rpx;
	}

	.rating-item {
		margin-right: 40rpx;
		font-size: 28rpx;
		color: #666;
		display: flex;
		align-items: center;
	}

	.rating-value {
		color: rgba(100, 194, 149, 1);
		font-weight: 600;
		margin-left: 8rpx;
	}

	.room-address {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 24rpx;
		line-height: 1.6;
		display: flex;
		align-items: center;
	}

	.map-icon {
		width: 32rpx;
		height: 32rpx;
		margin-left: 12rpx;
		opacity: 0.7;
	}

	.map-icon:active {
		opacity: 1;
		transform: scale(0.95);
	}

	.room-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.price {
		font-size: 28rpx;
		color: #FF6B6B;
		font-weight: 600;
	}

	.book-btn {
		padding: 12rpx 36rpx;
		background: linear-gradient(135deg, rgba(100, 194, 149, 0.9), rgba(100, 194, 149, 1));
		color: #fff;
		border-radius: 40rpx;
		font-size: 28rpx;
		font-weight: 500;
		box-shadow: 0 4rpx 12rpx rgba(100, 194, 149, 0.3);
		transition: all 0.3s ease;
	}

	.book-btn:active {
		transform: scale(0.96);
		box-shadow: 0 2rpx 6rpx rgba(100, 194, 149, 0.3);
	}

	.time-slot-container {
		margin-top: 20rpx;
		padding-top: 20rpx;
		border-top: 1rpx solid #f5f5f5;
	}
</style>